<template>
  <div class="container">
    <ul>
      <TodoItem
        class="todolist-div"
        v-for="(item, index) in todoList"
        :key="item.id"
        :todoItemData="item"
        :index="index"
      />
    </ul>
    <!-- el-checkbox状态不会修改,打印列表后就可以，应该是bug -->
    <!-- <div style="display:none">
      {{ todoList }}
    </div> -->

    <!-- <hr />
    <ul>
      <li v-for="(item, index) in todoList" :key="item.id">
        <input type="checkbox" :checked="item.isComplete" :value="index" />
        <span>{{ item.title }}</span>
      </li>
    </ul> -->
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import TodoItem from '@/components/TodoItem.vue';

export default defineComponent({
  name: 'TodoList',
  props: {
    todoList: Array,
  },

  components: {
    TodoItem,
  },
});
</script>

<style lang="scss" scoped>
.todolist-div {
  border-bottom: 1px $boder-color solid;

  &:first-child {
    border-top: 1px $boder-color solid;
  }

  .el-button {
    display: none;
  }
}
</style>
